import React from 'react'
import { Button, Form, Input, Card, Space, Table, Tag } from 'antd'
// 这是antd中提供的一些ts类型
import type { ColumnsType } from 'antd/es/table'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'

import './index.css'

interface DataType {
  key: string
  name: string
  age: number
  address: string
  tags: string[]
}

// colums数组中有几个对象,就意味着表格中有多少列
// const columnstest: ColumnsType<DataType> = [
//   {
//     title: 'Name', // 决定了当前这一列的表头显示什么

//     // dataIndex介绍:
//     // 1. 如果不写render,则dataIndex的值是什么,表格中这一列就渲染dataSource中对应的数据(比如: 当前这一列会渲染dataSource中每一个对象的name属性的值)
//     // 2. 既写了dataIndex,又写了render.那么最终以render函数的返回值为渲染的内容.此时的dataIndex决定了render函数中第一个参数接收到的是什么(比如:当前列中render的形参text接收到的就是dataSource中每一个对象的name属性的值). 如果只写了render,没有dataIndex.则render的形参text接收到的就是dataSource中的对象
//     dataIndex: 'name',
//     // key: 'name',
//     render: (text) => {
//       console.log(text)

//       return <a>{text}</a>
//     },
//   },
//   {
//     title: 'Age',
//     dataIndex: 'age',
//     key: 'age',
//   },
//   {
//     title: 'Address',
//     dataIndex: 'address',
//     key: 'address',
//   },
//   {
//     title: 'Tags',
//     key: 'tags',
//     dataIndex: 'tags',
//     render: (_, { tags }) => (
//       <>
//         {tags.map((tag) => {
//           let color = tag.length > 5 ? 'geekblue' : 'green'
//           if (tag === 'loser') {
//             color = 'volcano'
//           }
//           return (
//             <Tag color={color} key={tag}>
//               {tag.toUpperCase()}
//             </Tag>
//           )
//         })}
//       </>
//     ),
//   },
//   {
//     title: 'Action',
//     key: 'action',
//     render: (_, record) => (
//       <Space size="middle">
//         <a>Invite {record.name}</a>
//         <a>Delete</a>
//       </Space>
//     ),
//   },
// ]
const columns: ColumnsType<DataType> = [
  {
    title: '序号', // 决定了当前这一列的表头显示什么
    // dataIndex: 'name',
    // key: 'name',
    render: (text, record, index) => {
      // text 是dataSource的数据,受到dataIndex的影响
      // record 也是dataSource的数据,永远都是dataSource中的对象
      // index 是dataSource中每一个数据的下标
      return index + 1
    },
    align: 'center', //让这一列的内容水平居中对齐
    width: 80, //让这一列宽度为80px
  },
  {
    title: '医院名称',
  },
  {
    title: '医院编号',
  },
  {
    title: 'api基础路径',
  },
  {
    title: '签名',
  },
  {
    title: '联系人名称',
  },
  {
    title: '联系人手机号',
  },
  {
    title: '操作',
    render: (_, record) => (
      // Space给子组件添加间隔
      <Space size="small">
        <Button type="primary" icon={<EditOutlined />}></Button>
        <Button type="primary" danger icon={<DeleteOutlined />}></Button>
      </Space>
    ),
    fixed: 'right', //这一列固定在右侧
    width: 120, //控制着一列的宽度是80px
  },
]

const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
]
export default function HospitalSet() {
  const onFinish = (values: any) => {
    console.log('Success:', values)
  }

  // const onFinishFailed = (errorInfo: any) => {
  //   console.log('Failed:', errorInfo)
  // }
  return (
    // Card组件自带白色背景颜色,有内边距
    <Card>
      <Form
        layout="inline" //控制表单中表单项布局的属性,inline表示在一行中展示
        name="basic"
        // labelCol,控制表单项的文字, span: 8 表示文字在一行中占8份.共24份
        // wrapperCol,控制表单项本身, span: 16 表示表单项本身占16份
        // labelCol={{ span: 4 }}
        // wrapperCol={{ span: 20 }}
        // initialValues={{ remember: false }} // 设置表单中表单项的初始值.使用表单项name属性的名字作为初始数据对象中的属性
        onFinish={onFinish} // 当表单中的提交按钮点击之后并且表单校验通过,则触发
        // onFinishFailed={onFinishFailed} //当表单中提交按钮点击之后,兵器表单校验不通过,则触发
      >
        <Form.Item
          // label="Username" // 设置表单项的文本
          name="username" //当前表单项的名称
          // 这个rules属性,是定义当前表单项的校验规则. required:true表达当前表单项为必填项
          // message就是表单校验不通过时的提示信息
          // rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item
        // label="Password"
        // name="password"
        // rules={[{ required: true, message: 'Please input your password!' }]}
        >
          {/* <Input.Password /> 密码框 */}
          <Input placeholder="医院编码" />
        </Form.Item>

        {/* wrapperCol={{ offset: 8, span: 16 }}  offset: 8表示当前组件,左侧偏移8份的距离 */}
        <Form.Item>
          {/* 如果一个表单中的按钮有属性htmlType="submit"则表示当前按钮是表单的提交按钮 */}
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>

        <Form.Item>
          <Button>清空</Button>
        </Form.Item>
      </Form>

      <div style={{ marginTop: 20 }}>
        {/* 虽然Button是antd中封装的组件,但是我们写的className和style会被当做props传递进去,然后Button组件内部,会将这些属性添加到真正的button标签上 */}
        <Button type="primary" className="add-btn">
          添加
        </Button>
        <Button type="primary" danger disabled>
          批量删除
        </Button>
        {/* 
        columns:决定了表格中有多少列,每一列的标题是什么
        dataSource: 决定了表格中展示什么数据
        scroll: 允许表格滚动. 当表格的宽度超过1500px则出现滚动条
        bordered: 给表格添加边框
         */}
        <Table
          style={{ marginTop: 20 }}
          columns={columns}
          dataSource={data}
          scroll={{ x: 1500 }}
          bordered
        />
      </div>
    </Card>
  )
}
